<template>
  <div>
    <div class="title">关联设备信息</div>
    <div class="info">
      <div class="flex">
        <q-input v-model="form.assetNumber"
                 readonly
                 dense
                 style="width: 280px"
                 :rules="[]"
                 outlined>
          <template v-slot:before>
            <label class="text-right name label-width">
              <span class="text-red">*</span> <span>设备编号:</span>
            </label>
          </template>
        </q-input>
        <q-input v-model="form.deviceTypeIot"
                 readonly
                 dense
                 style="width: 280px"
                 :rules="[]"
                 outlined>
          <template v-slot:before>
            <label class="text-right name label-width">
              <span class="text-red">*</span> <span>设备类型:</span>
            </label>
          </template>
        </q-input>
      </div>
      <div class="flex">
        <q-input v-model="form.deviceFactoryIot"
                 readonly
                 dense
                 style="width: 280px"
                 :rules="[]"
                 outlined>
          <template v-slot:before>
            <label class="text-right name label-width">
              <span class="text-red">*</span> <span>设备厂家:</span>
            </label>
          </template>
        </q-input>
        <q-input v-model="form.deviceSerialIot"
                 readonly
                 dense
                 style="width: 280px"
                 :rules="[]"
                 outlined>
          <template v-slot:before>
            <label class="text-right name label-width">
              <span class="text-red">*</span> <span>设备型号:</span>
            </label>
          </template>
        </q-input>
      </div>
      <div class="flex">
        <q-input v-model="form.deviceProtocolIot"
                 readonly
                 dense
                 style="width: 280px"
                 :rules="[]"
                 outlined>
          <template v-slot:before>
            <label class="text-right name label-width">
              <span class="text-red">*</span> <span>通讯协议:</span>
            </label>
          </template>
        </q-input>
        <q-input v-model="communicationTypeIot"
                 readonly
                 dense
                 style="width: 280px"
                 :rules="[]"
                 outlined>
          <template v-slot:before>
            <label class="text-right name label-width">
              <span class="text-red">*</span> <span>通讯方式:</span>
            </label>
          </template>
        </q-input>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'associated-device-information',
  props: {
    form: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    communicationTypeIot () {
      return this.form.communicationTypeIot === 'LAN' || this.form.communicationTypeIot === 'lan' ? this.form.communicationTypeIot + '/PCMCIA' : this.form.communicationTypeIot
    }
  },
  data () {
    return {
    }
  },
  watch: {
  },
  methods: {
  }
}
</script>

<style scoped lang="stylus">
.label-width
  width 94px
.title
  font-weight 500
  font-size 16px
  color $primary
  margin-bottom 20px
</style>
